<div class="components-table-demo-control-bar">
  <form nz-form nzLayout="inline" [formGroup]="validateForm">
    <nz-form-item>
      <nz-form-control>
        <nz-select style="width: 120px;" formControlName="questionType" (ngModelChange)="getQuestionByType($event)">
          <nz-option *ngFor="let c of questionByTypeList" [nzValue]="c" [nzLabel]="c"></nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label>题干</nz-form-label>
      <nz-form-control>
        <input nz-input formControlName="content">
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-control>
        <button nz-button [nzType]="'primary'" (click)="search()">{{'搜索' | translate}} <i class="anticon anticon-sync"></i></button>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-control>
        <button nz-button [nzType]="'primary'" (click)="showModify()">{{'modify.text.add' | translate}}</button>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-control>
        <button nz-button [nzType]="'primary'" (click)="goInsert()">{{'导入试题' | translate}}</button>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-control>
        <button nz-button [nzType]="'primary'" (click)="openComponent()">{{'导出试题' | translate}}</button>
      </nz-form-control>
    </nz-form-item>


  </form>
</div>
<nz-table
  #dynamicTable
  [nzData]="listOfData"
  [nzBordered]="bordered"
  [nzSimple]="simple"
  [nzSize]="size"
  [nzLoading]="_loading"
  [(nzPageIndex)]="page.pageNo"
  [(nzPageSize)]="page.pageSize"
  [nzTotal]="page.total"
  (nzPageIndexChange)="getAllQuestionByPage()"
  (nzPageSizeChange)="getAllQuestionByPage(true)"
  [nzShowTotal]="pagination"
  [nzScroll]="{ x: '800px' }"
  nzFrontPagination="false"
  nzShowSizeChanger="true"
  nzShowQuickJumper="true"
  (nzCurrentPageDataChange)="currentPageDataChange($event)"
>
  <thead>
  <tr *ngIf="header">
    <th
      nzWidth="10px" nzLeft="0px"
      nzShowCheckbox
      *ngIf="checkbox"
      [(nzChecked)]="allChecked"
      [nzIndeterminate]="indeterminate"
      (nzCheckedChange)="checkAll($event,listOfData)"
    ></th>
    <th nzWidth="10px" nzLeft="20px" nzShowExpand *ngIf="expandable"></th>
    <th nzWidth="300px">试题内容</th>
    <th nzWidth="50px">分类</th>
    <th nzWidth="50px">难度</th>
    <th nzWidth="50px">题型</th>
    <th nzWidth="50px" nzWidth="50px">作者</th>
    <th nzWidth="80px" nzRight="0px">操作</th>
  </tr>
  </thead>
  <tbody>
  <ng-template ngFor let-data [ngForOf]="dynamicTable.data">
    <tr>
      <td nzLeft="0px" nzShowCheckbox *ngIf="checkbox" [(nzChecked)]="data.checked" (nzCheckedChange)="refreshStatus($event,data.id)"></td>
      <td nzLeft="20px" nzShowExpand *ngIf="expandable" [(nzExpand)]="data.expand"></td>
      <td style="color: #00a0e9" >{{data.content}}</td>
      <td >{{ data.knowledge }}</td>
      <td >{{ data.difficulty }}</td>
      <td >{{ data.questionType }}</td>
      <td nzWidth="80px">{{ data.contributor }}</td>
      <td nzRight="0px">
        <a (click)="showModify(data)">{{'modify.text.edit' | translate}}</a>
        <nz-divider nzType="vertical"></nz-divider>
        <nz-popconfirm [nzTitle]="'modify.text.delete_tip'|translate" (nzOnConfirm)="delete(data.id)" [nzPlacement]="'top'">
          <a nz-popconfirm>{{'modify.text.delete' | translate}}</a>
        </nz-popconfirm>
      </td>
    </tr>
    <tr [nzExpand]="data.expand && expandable">
      <td [attr.colspan]="checkbox ? 8 : 0" >
        <div class="col-md-7 col-sm-12">
          <div class="portlet green-meadow box">
            <div class="portlet-title">
              <div class="caption">查看试题详细信息</div>
              <div class="actions">
              </div>
            </div>
            <div class="portlet-body">
              <div>
                <div class="ques-title">
                  <span class="ques-type ques-multiple">{{data.questionType}}</span>
                  <div class="qcotent" style="white-space: pre-line;" [innerHTML]="data.content"></div>
                </div>
                <div *ngIf="data.picture!=null" class="question-labels-container">
                  <span class="question-labels" [innerHTML]="data.picture"></span>
                </div>
                <div class="question-option-list" *ngIf="data.questionType=='单选题'||data.questionType=='多选题'">
                  <ol style="list-style-type: upper-latin;" class=" list-paddingleft-2">
                    <li >
                      <p>
                        <span class="option" style="white-space: pre-line;" [innerHTML]="data.choiceA"></span>
                      </p>
                    </li>
                    <li>
                      <p>
                        <span class="option" style="white-space: pre-line;" [innerHTML]="data.choiceB"></span>
                      </p>
                    </li>
                    <li>
                      <p>
                        <span class="option" style="white-space: pre-line;" [innerHTML]="data.choiceC"></span>
                      </p>
                    </li>
                    <li>
                      <p>
                        <span class="option" style="white-space: pre-line;" [innerHTML]="data.choiceD"></span>
                      </p>
                    </li>
                    <li *ngIf="data.choiceNum>4">
                      <p>
                        <span class="option" style="white-space: pre-line;" [innerHTML]="data.choiceE"></span>
                      </p>
                    </li>
                    <li *ngIf="data.choiceNum>5">
                      <p>
                        <span class="option" style="white-space: pre-line;" [innerHTML]="data.choiceF"></span>
                      </p>
                    </li>
                    <li *ngIf="data.choiceNum>6">
                      <p>
                        <span class="option" style="white-space: pre-line;" [innerHTML]="data.choiceG"></span>
                      </p>
                    </li>
                    <li *ngIf="data.choiceNum>7">
                      <p>
                        <span class="option" style="white-space: pre-line;" [innerHTML]="data.choiceH"></span>
                      </p>
                    </li>
                  </ol>
                </div>
                <div class="ques-answers">
                  <div class="view_question">
                    <div class="rightAnswer">
                      <b>[正确答案]: <span style="white-space: pre-line;" [innerHTML]="data.answer"></span></b></div>
                  </div>
                </div>
              </div>
              <div *ngIf="data.description!=null" class="question-labels-container">
                <span>[解析]：</span>
                <span style="white-space: pre-line;" class="question-labels" [innerHTML]="data.description"></span>
              </div>
              <div *ngIf="data.knowledge!=null" class="question-labels-container">
                <span>[分类]：</span>
                <span class="question-labels">{{data.knowledge}}</span>
              </div>
              <div *ngIf="data.difficulty!=null" class="question-labels-container">
                <span>[难度]：</span>
                <span class="question-labels">{{data.difficulty}}</span>
              </div>
            </div>
          </div>
        </div>
      </td>
    </tr>
  </ng-template>
  </tbody>
</nz-table>
<style>
  .components-table-demo-control-bar {
    margin-bottom: 12px;
  }

  .nz-form-item {
    margin-right: 16px;
    margin-bottom: 8px;
  }

  .col-md-7 {
    width: 58.33333333%;
  }

  .col-sm-12 {
    width: 100%;
  }

  .portlet {
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
  }

  .portlet.green-meadow {
    background-color: #1fbc2f;
  }

  /*.portlet.box {*/
  /*padding: 0px !important;*/
  /*}*/

  .portlet.box > .portlet-body {
    background-color: #fff;
    padding: 10px;
  }

  .portlet > .portlet-body {
    clear: both;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    -ms-border-radius: 0 0 4px 4px;
    -o-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
  }

  .portlet > .portlet-title {
    padding: 0;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    -ms-border-radius: 4px 4px 0 0;
    -o-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
  }

  .portlet > .portlet-title > .caption {
    float: left;
    display: inline-block;
    font-size: 18px;
    line-height: 18px;
    font-weight: 300;
    padding: 10px 0;
  }

  .portlet > .portlet-title > .actions {
    float: right;
    display: inline-block;
    padding: 6px 0;
  }

  .portlet.box > .portlet-title > .caption {
    padding: 11px 0 11px 12px;
  }

  .portlet.box.green-meadow > .portlet-title > .caption {
    color: #FFFFFF;
  }

  .portlet > .portlet-body {
    clear: both;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    -ms-border-radius: 0 0 4px 4px;
    -o-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
  }

  .ques-title {
    position: relative;
    padding-right: 85px;
    font-size: 17px;
    vertical-align: middle;
    line-height: 1.6em;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    word-break: break-word;
  }

  .ques-multiple {
    color: #80b830;
    border-color: #80b830;
  }

  .ques-type {
    font-size: 12px;
    border: 1px solid;
    border-radius: 2px;
    padding: 2px;
    vertical-align: middle;
  }

  .qcotent {
    display: inline;
    font-size: 18px;
    color: #333333;
  }

  .ques-score {
    color: #aeaeae;
  }

  .question-option-list {
    margin-top: 10px;
  }

  .question-option-list ul, .question-option-list ol {
    margin: 0;
    padding-left: 30px;
  }

  .ques-answers {
    padding-top: 15px;
  }

  .view_question .rightAnswer, .view_question .userAnswer, .view_question .score {
    display: inline-table;
    margin-right: 45px;
  }

  .score {
    text-align: right;
  }

  .view_question .feedback {
    margin-top: 30px;
  }

  .view_question blockquote.right {
    border-left: 5px solid #39AB55;
  }


  select {
    margin: 0;
  }
  select.input-sm {
    height: 28px;
    line-height: 28px;
    padding: 2px 10px;
  }
  select.input-sm {
    height: 30px;
    line-height: 30px;
  }
  .input-sm {
    height: 28px;
    padding: 5px 10px;
    font-size: 13px;
  }
  .input-inline {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }
  .input-small {
    width: 145px !important;
  }
  .form-control {
    font-size: 14px;
    font-weight: normal;
    color: #333;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  }
</style>
